/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Cell, Table, TableBody, TableHead, TableRow, Text,} from "customize-easy-ui-component";
import {useMeasureTable} from "../../hook/useMeasure";
import {RepLink} from "../../common/base";
import {tail观测} from "./orcBase";

/**比较通用的测量结果记录表
 * @property mem: 备注的存储名
 * @property bhsp: 项目编号的colSpan；
 * @property noxm: 没有项目栏目
 * */
export const MeasureErectDjVw = ({orc, rep, label, config, tag = 'Measure', children, mem, bhsp=2,
                              fixed = ["2.7%", "6%", "3%", "8%", "%", "10%", "4%", "8%", "7.1%", "5.2%"]
                            }: {
               orc: any, rep: any, label: string, config: any[], fixed?: string[], tag?: string, children?: any,mem?: string,
               bhsp?:number,
                            }
) => {
  const renderMeasure = useMeasureTable({rep, orc, config});
  const 观测备注: string[] = mem ? orc?.[mem] : '';
  const bzSpan=fixed.length-1;
  return <>
    <Text variant="h4" css={{
      marginTop: '1rem', "@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}
    }}>{label}</Text>
    <Table id={tag} fixed={fixed} css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}} } tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.7rem'}}>序号</Text></CCell>
          <CCell colSpan={bhsp}><Text css={{fontSize: '0.7rem'}}>项目编号</Text></CCell><CCell colSpan={4-bhsp}>检验项目</CCell>
          <CCell>单位</CCell><CCell>观测值</CCell><CCell>结果值</CCell><CCell><Text css={{fontSize: '0.75rem'}}>检验结果</Text></CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={tag}>
          {renderMeasure}
          {mem  &&  <TableRow>
            <CCell>备注</CCell>
            <Cell colSpan={bzSpan}>
              <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                {观测备注 || '／'}
              </div>
            </Cell>
          </TableRow>
          }
        </RepLink>
      </TableBody>
    </Table>
    { children ? children : tail观测 }
  </>;
};
